<template>
  <a-row class="login">
    <a-col :span="8" :offset="8" class="login-main">
      <h1 style="text-align: center">
        <rocket-two-tone />&nbsp;高性能售票系统
      </h1>
      <a-form :model="loginForm" name="basic" autocomplete="off">
        <a-form-item
          label=""
          name="mobile"
          :rules="[{ required: true, message: '请输入手机号!' }]"
        >
          <a-input v-model:value="loginForm.mobile" placeholder="手机号" />
        </a-form-item>

        <a-form-item
          label=""
          name="code"
          :rules="[{ required: true, message: '请输入验证码!' }]"
        >
          <a-input v-model:value="loginForm.code">
            <template #addonAfter>
              <a @click="sendCode">获取验证码</a>
            </template>
          </a-input>
          <!--<a-input v-model:value="loginForm.code" placeholder="验证码"/>-->
        </a-form-item>

        <a-form-item>
          <a-button type="primary" block @click="login">登录</a-button>
        </a-form-item>
      </a-form>
    </a-col>
  </a-row>
</template>

<script>
import { defineComponent, reactive } from "vue";
import { notification } from "ant-design-vue";
import { useRouter } from "vue-router";
import store from "@/store";
import { handleSendCode, handleLogin } from "@/api/login.js";

export default defineComponent({
  name: "login-view",
  setup() {
    const router = useRouter();

    const loginForm = reactive({
      mobile: "13800138000",
      code: "",
    });

    const sendCode = () => {
      handleSendCode(loginForm).then((res) => {
        notification.success({ description: "发送验证码成功！" });
        loginForm.code = "8888";
      }).catch(error => {
        notification.error({ description: error.message });
      });
    };

    const login = () => {
      handleLogin(loginForm).then((res) => {
        notification.success({ description: "登录成功！" });
        // 登录成功，跳到控台主页
        router.push("/");
        store.commit("setMember", res.content);
      }).catch(error => {
        notification.error({ description: error.message });
      });
    };

    return {
      loginForm,
      sendCode,
      login,
    };
  },
});
</script>

<style lang="scss" scoped>
.login-main {
  margin-top: 100px;
  padding: 30px 30px 20px;
  border: 2px solid grey;
  border-radius: 10px;
  background-color: #fcfcfc;
  h1 {
    font-size: 25px;
    font-weight: bold;
  }
}
</style>
